<!--
 * @Descripttion: 
 * @Author: yansu
 * @Date: 2020-10-26 18:38:48
 * @LastEditors: yansu
 * @LastEditTime: 2020-11-11 10:46:39
-->
<template>
  <el-form :model="formStacked">
    <el-select size="mini" :style='selectStyle?selectStyle:""' :disabled="disabled" class="select" v-model.trim="formStacked.value" :placeholder="selectPlaceholder" @change="handleChange"
               :filterable="filterable"
               @visible-change="visibleChange">
      <span class="isQuesTitle" v-show="isQuesTitle">{{isQuesTitle}}</span>

      <el-option class="ss-el-option" v-for="item in selectOptions" @click.native="handleClick(item.value, item.disabled)" :label="item.label" :value="item.value" :disabled="item.disabled" :class="item.sortClass"></el-option>
    </el-select>
  </el-form>
</template>
<script>
  export default {
    name: 'Select',
    data () {
      return {
        loading: false,
        value2: ''
      }
    },
    props: {
      selectOptions: Array,
      form: Object,
      isQuesTitle: String,
      disabled: {default: false, type: Boolean},
      isCall: {default: false, type: Boolean},
      noChange: {default: false, type: Boolean},
      filterable: {default: false, type: Boolean},
      placeholder: String,
      selectStyle: String
    },
    methods: {
      handleChange (value) {
      console.log(this.selectOptions,'sususususussu');

//        if (!this.noChange) {
//          // �����߼�������������ͬ�����⴦��
//          this.$emit('quickSelect', value)
//        }
      },
      visibleChange (isShow) {
        if (isShow) {
          this.$emit('show')
        }
      },
      handleClick (value, disabled) {
        if (!this.noChange && !disabled) {
          this.$emit('quickSelect', value)
        }
      }
    },
    mounted(){
    },
    computed: {
      formStacked () {
        return this.form
      },
      selectPlaceholder () {
        let placeholder = ''
        if (this.placeholder) {
          placeholder = this.placeholder
        } else {
          placeholder = this.isCall? this.$t('public.pleasePick'):this.$t('public.all')
        }
        return placeholder
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common"
  .el-input
    font-size 12px
  .select
  .nomal
    border-radius 4px
  .select
    width 80px
    margin-left 10px
    flex 3
    color $cf-gray2
  .isQuesTitle
    font-size: 10px
    color: #808080
    text-align: center
    display: inline-block
    width: 100%
    line-height: 21px
  // select 分类下划线
  .sortClass
    &:after
      content: ""
      position: absolute
      display: block
      left: 5px
      right: 5px
      bottom: 0
      height: 1px
      background: $c-border2;
</style>
